import React, { Component } from 'react';
import { getMultiLang, cardCache, base, createPage, toast, pageTo } from 'nc-lightapp-front';
import config from './config';
import _ from 'lodash-es';
const { NCButton } = base

const { setDefData, getDefData } = cardCache;

class DetailModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            multiLang: {}
        }
    }

    componentDidMount() {
        this.initTempAndLang();
    }

    initTempAndLang() {
        const props = this.props;
        getMultiLang({
            ...config.multiLang,
            callback: (json) => {
                this.setState({ multiLang: json }, () => {
                    props.createUIDom({ pagecode: config.pagecode }, (data) => {
                        this.setMeta(data.template);
                    });
                });
            }
        });
    }

    setMeta(meta) {
        let props = this.props;
        setDefData(`${config.detailListArea}_oid`, config.datasource, meta[config.detailListArea].oid);
        meta[config.detailListArea].items.forEach((item,index)=>{
            if(item.attrcode === 'tablecode'){
                item.options = props.fpmxType;
                item.required = true;
            }
            else {
                item.disabled = true;
            }
        })
        //票夹表头开票日期去掉hh:mm:ss
        meta[config.detailListArea].items.forEach(item => {
            if(item.attrcode === 'kprq') {
                item.itemtype = 'datepicker'
            }
        })
        props.meta.setMeta(meta, () => {
            this.loadData();
        });
    }

    loadData() {
        this.props.editTable.setTableData(config.detailListArea, {
            areacode: config.detailListArea,
            rows: this.props.checkedList
        });
        this.props.editTable.setStatus(config.detailListArea, 'edit');
    }

    onReimbursementButtonClick() {
        const { editTable } = this.props;
        const checkedRows = editTable.getAllRows(config.detailListArea);
        const tablecodeSpilt = checkedRows.map(item=>{
            const values = _.get(item, 'values');
            const pk_erminvoice = _.get(values, 'pk_erminvoice.value','')
            const tablecode = _.get(values, 'tablecode.value','')
            if(tablecode === '') {
                toast({
                    color: 'warning',
                    content: this.state.multiLang['select_mxlx_row']
                });
            }
            return {
                pk_erminvoice,
                tablecode
            }
        });
        const filterTablecode =tablecodeSpilt.filter(item=> {
            return item.tablecode
        })
        if(filterTablecode.length === tablecodeSpilt.length) {
            this.props.close()
            pageTo.specialOpenTo(this.props.codeVal.url, {
                pagecode: this.props.codeVal.pagecode,
                appcode: this.props.codeVal.appcode,
                pk_tradetypeid: this.props.codeVal.pk_tradetypeid,
                status: 'add',
                tablecodeSpilt: JSON.stringify(tablecodeSpilt),
                from: 'walletInvoicePage'
            });
        }
        console.log(tablecodeSpilt,'tablecodeSpilt===')
    }

    onCancelButtonClick() {
        this.props.close()
    }

    render() {
        const { editTable } = this.props;
        const { createEditTable } = editTable;
        return (
            <div className="trade-type-list">
                <div className="nc-singleTable-table-area">
                    {createEditTable(config.detailListArea, {
                        showIndex: true,
                        showCheck: false
                    })}
                </div>
                <div className="nc-singleTable-button-area">
                    <NCButton
                        colors="primary"
                        onClick={this.onReimbursementButtonClick.bind(this)}
                    >
                        {this.state.multiLang['confirm']}
                    </NCButton>
                    <NCButton
                        style={{ marginLeft: 16 }}
                        onClick={this.onCancelButtonClick.bind(this)}
                    >
                        {this.state.multiLang['cancel']}
                    </NCButton>
                </div>
            </div>
        )
    }
}

export default createPage({
    mutiLangCode: config.multiLang.moduleId,
    initTemplate: null
})(DetailModal);